<template>
    <div style="min-height: 100%;width:100%;overflow: hidden;">
        <!-- 取号页面-->
        <div class="quhaotitle">
            <span>在线取号</span>
        </div>
        <div class="queuingInput" v-show="queuingInput">
            <div class="papers">
                <div class="username">
                    <span>姓名</span>
                    <div class="name_input">
                        <input type="text" placeholder="请输入姓名" v-model="customerName" />
                    </div>
                </div>
                <div class="idtype">
                    <span>证件类型</span>
                    <div class="idtype_input">
                        <select v-model="customerIDtype" required>
                            <option value="01">居民身份证</option>
                            <option value="02">居民户口簿</option>
                            <option value="03">驾驶证</option>
                            <option value="04">中国因公护照</option>
                            <option value="05">中国因私护照</option>
                            <option value="06">大陆居民往来港澳通行证</option>
                            <option value="07">大陆居民往来台湾通行证</option>
                            <option value="08">军官证/警官证</option>
                            <option value="09">士兵证</option>
                            <option value="10">军官离退休证</option>
                            <option value="11">港澳居民来往内地通行证</option>
                            <option value="12">台湾居民来往大陆通行证</option>
                            <option value="13">香港身份证</option>
                            <option value="14">澳门身份证</option>
                            <option value="15">台湾身份证</option>
                            <option value="16">外国护照</option>
                            <option value="17">外国人永久居留证</option>
                            <option value="18">港澳台居民居住证</option>
                            <option value="19">其它个人证件</option>
                        </select>
                        <img src="~@/assets/images/arrow-right.png"/>
                    </div>
                </div>
                <div class="idnumber">
                    <span>证件号码</span>
                    <div class="idnumber_input">
                        <input type="number" placeholder="请输入证件号码" v-model="customerIDnumber" required/>
                    </div>
                </div>
                <div class="business">
                    <span>业务类型</span>
                    <div class="business_input">
                        <select v-model="serviceType" required>
                            <option value="01">承保</option>
                            <option value="02">理赔</option>
                        </select>
                        <img src="~@/assets/images/arrow-right.png"/>
                    </div>
                </div>
            </div>
            <div class="tip">
                <img src="~@/assets/images/icon_tips.png"/>
                <p class="tipa">温馨提示</p>
                <p class="tipb">节假日期间，请提前与网点电话确认是否营业</p>
            </div>
            <div class="button">
                <div class="submit" @click="submit"> 提交</div>
            </div>
        </div>
        <!--提交后页面-->
        <div class="queuingTip" v-show="queuingTip">
            <div class="tipnumber" >{{tabledata.queueCode}}</div>
            <p class="tipservice">您当前办理的业务类型是：{{tabledata.serviceType}}</p>
            <p class="tipserviceEng">Your current service is: {{tabledata.serviceTypeEng}}</p>
            <p class="tippeople">该业务当前等待人数：<span>{{tabledata.countQueue}}</span></p>
            <p class="tiptime">取号时间：{{tabledata.pickingTime}}</p>
        </div>
    </div>
</template>
<script >
    document.title="在线取号";
</script>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import 'vant/lib/dialog/style';
import { Toast, Dialog } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
Vue.use(Toast);
Vue.use(Dialog);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { [Dialog.Component.name]: Dialog.Component,Header },
})
export default class Queuing extends Vue {
    openId: any = '';
    unionId: any = '';
    userDate: any = '';
    queuingInput: boolean = true;
    queuingTip: boolean = false;
    departId: any = '';//71039244
    longitude: any = '';//113.985133
    latitude: any = '';//38.200008
    serviceType: any = '01';//01
    customerPhone: any = '';//18031934091
    customerName: any = '';//张三
    customerIDtype: any = '';//01
    customerIDnumber: any = '';//130523199212083816
    queueCode: any = '';//111
    countQueue: any = '';//3
    pickingTime: any = '';//2021年4月30日10时30分
    columns: any = [];
    tabledata: any ={
        serviceTypeEng:'',
    };
    created() {
        this.departId = this.$route.query.departId; // 网点部门id
        this.longitude = this.$route.query.longitude; 
        this.latitude = this.$route.query.latitude;
        this.openId = this.$route.query.openId;
        this.unionId = this.$route.query.unionId;
        this.getMyBussinessCard()//获取页面数据
    }
    getMyBussinessCard(){
        const data = {
            // appopenid: this.appid,
            // appopenid: this.openId,
            openid: this.openId,
            // unionid: this.unionId,
            unionid: '',
            // openid: '',
            // appopenid: '',
            // unionid: '82d5fa5048fae3251c0e5beadf2a6e7616c20c62cebde8e7a3a91453a1f9f69a',
            // appopenid:'4a82cc1feed973f25e5ac549b7d03d9cc534f1350e6222db50fb30e52c4a8b16'
        }
        var _this = this;
        cloudApi.getMyBussinessCardURL(data).then(res => {
        if(res.status = 200){
            if(res.data.result.length!== 0){
                // console.log(res.data)
                _this.customerPhone=res.data.result[0].mobile_Phone
                _this.customerName=res.data.result[0].name
                _this.customerIDtype=res.data.result[0].type_card
                _this.customerIDnumber=res.data.result[0].id_card
            }
        }
        })
    }
    submit(type:any){
        this.queuingInput=!this.queuingInput,
        this.queuingTip=!this.queuingTip
        var _this = this;
        // _this.tabledata = {};
        cloudApi
            .acquireAbout({
        //         departId: "71039244",
        //         longitude: "113.985133",
        //         latitude: "38.200008",
        //         serviceType: "01",
        //         customerPhone: "18031934091",
        //         customerName: "张三",
        //         customerIDtype: "01",
        //         customerIDnumber: "130523199212083816"
                departId:_this.departId,
                longitude:_this.longitude,
                latitude:_this.latitude,
                serviceType: _this.serviceType,
                customerPhone: _this.customerPhone,
                customerName: _this.customerName,
                customerIDtype: _this.customerIDtype,
                customerIDnumber: _this.customerIDnumber,
            })
            .then((res: any) => {
                // console.log(res.data)                  
                if(res.data.flag != "success"){
                    Dialog.alert({
                        title: '温馨提示',
                        message: res.data.data,
                        confirmButtonColor: '#009B63',
                    })
                    this.queuingInput=true;
                    this.queuingTip=false;
                    return;              
                }
                if(res.data){
                    if(res.data.data){
                        _this.tabledata=res.data.data
                        if(res.data.data.serviceType=="01"){
                            _this.tabledata.serviceType="承保"
                            _this.tabledata.serviceTypeEng="underwriting"
                        }else{
                            _this.tabledata.serviceType="理赔"
                            _this.tabledata.serviceTypeEng="settlement of claims"
                        }
                    
                    }
                }          // console.log(res.data)
        });
	}
}
</script>
<style scoped>
    .queuingTip{
        background-image: url(~@/assets/images/bg_quhao.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
</style>
